<template>
  <div class="control-panel">
    <!-- 第一行查询 -->
    <div class="control-row">
      <label for="combo1">查询每个制冷剂的每个月的回收率</label>
      <select id="combo1" v-model="selectedOption1">
        <option v-for="option in options1" :key="option" :value="option">{{ option }}</option>
      </select>
      <select id="combo2" v-model="selectedOption2">
        <option v-for="option in options2" :key="option" :value="option">{{ option }}</option>
      </select>
      <button @click="handleStatsClick">统计</button>
    </div>
    
    <!-- 第二行查询 -->
    <div class="control-row">
      <label for="combo3">查询每个实验台所有制冷剂每个月的回收率</label>
      <select id="combo3" v-model="selectedBench1">
        <option v-for="bench in benches" :key="bench" :value="bench">{{ bench }}</option>
      </select>
      <select id="combo4" v-model="selectedMonth1">
        <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
      </select>
      <button @click="handleBenchStats1Click">统计实验台</button>
    </div>
    
    <!-- 第三行查询 -->
    <div class="control-row">
      <label for="combo5">查询每个实验台所有制冷剂每个月的回收率</label>
      <select id="combo5" v-model="selectedBench2">
        <option v-for="bench in benches" :key="bench" :value="bench">{{ bench }}</option>
      </select>
      <select id="combo6" v-model="selectedMonth2">
        <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
      </select>
      <button @click="handleBenchStats2Click">统计实验台</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    
    // 下拉选项数据
    const options1 = ref(['选项A', '选项B', '选项C'])
    const options2 = ref(['选项1', '选项2', '选项3'])
    const benches = ref(['实验台1', '实验台2', '实验台3'])
    const months = ref(['一月', '二月', '三月'])
    
    // 选中的值
    const selectedOption1 = ref(options1.value[0])
    const selectedOption2 = ref(options2.value[0])
    const selectedBench1 = ref(benches.value[0])
    const selectedMonth1 = ref(months.value[0])
    const selectedBench2 = ref(benches.value[0])
    const selectedMonth2 = ref(months.value[0])
    
    // 处理统计按钮点击
    const handleStatsClick = () => {
      router.push({
        name: 'Stats',
        query: {
          result: `统计结果页面：${selectedOption1.value} + ${selectedOption2.value}`,
          type: 'refrigerant-monthly'
        }
      })
    }
    
    // 处理第一个实验台统计按钮点击
    const handleBenchStats1Click = () => {
      router.push({
        name: 'Stats',
        query: {
          result: `统计结果页面：实验台 ${selectedBench1.value}，月份：${selectedMonth1.value}`,
          type: 'bench-all-refrigerants'
        }
      })
    }
    
    // 处理第二个实验台统计按钮点击
    const handleBenchStats2Click = () => {
      router.push({
        name: 'Stats',
        query: {
          result: `统计结果页面：实验台 ${selectedBench2.value}，月份：${selectedMonth2.value}`,
          type: 'bench-monthly'
        }
      })
    }
    
    return {
      options1,
      options2,
      benches,
      months,
      selectedOption1,
      selectedOption2,
      selectedBench1,
      selectedMonth1,
      selectedBench2,
      selectedMonth2,
      handleStatsClick,
      handleBenchStats1Click,
      handleBenchStats2Click
    }
  }
}
</script>

<style scoped>
.control-panel {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.control-row label {
  font-weight: bold;
  min-width: 300px;
  margin-right: 10px;
}

select {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
  min-width: 100px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

button:hover {
  background-color: #2980b9;
}

@media (max-width: 768px) {
  .control-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .control-row label {
    margin-bottom: 5px;
    min-width: auto;
    width: 100%;
  }
  
  select {
    width: 100%;
  }
  
  button {
    width: 100%;
    margin-top: 5px;
  }
}
</style>